<template>
  <div class="dialog">
    <el-dialog 
      title="资金管理系统" 
      :visible.sync="dialog.show"
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      :modal-append-to-body="false"
    >
    <div class="form">
      <el-form 
        ref="form"
        :rules="rules"
        :model="form" 
        label-width="120px" 
        style="margin:10px;width:auto;"
      >
        <el-form-item label="收支类型 :" >
          <el-select v-model="form.type" placeholder="请选择活动区域">
            <el-option
              v-for="type of form_type_list"
              :key="type"
              :label="type" 
              :value="type"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收支描述 :" prop='describe'>
          <el-input v-model.trim="form.describe"></el-input>
        </el-form-item>
        <el-form-item label="收入 :" prop='expend'>
          <el-input v-model.trim="form.expend"></el-input>
        </el-form-item>
        <el-form-item label="支出 :" prop='income'>
          <el-input v-model.trim="form.income"></el-input>
        </el-form-item>
        <el-form-item label="账户现金 :" prop='cash'>
          <el-input v-model.trim="form.cash"></el-input>
        </el-form-item>
        <el-form-item label="备注 :">
          <el-input type="textarea" v-model.trim="form.remark"></el-input>
        </el-form-item>
        <el-form-item  class="text_right">
            <el-button @click="dialog.show = false">取 消</el-button>
            <el-button type="primary" @click='onSubmit("form")'>提  交</el-button>
        </el-form-item>
      </el-form>
    </div>  
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    dialog: Object,
    form: Object
  },
  data () {
    return {
      form_type_list: [
        '优惠券',
        '提现手续费',
        '充值',
        '买书',
        '买电脑',
        '吃饭',
        '唱歌'
      ],
      rules: {
        describe: {
          required: true, message: '收支描述不能为空', trigger: 'blur'
        },
        income: {
          required: true, message: '收入不能为空', trigger: 'blur'
        },
        expend: {
          required: true, message: '支出不能为空', trigger: 'blur'
        },
        cash: {
          required: true, message: '账户不能为空', trigger: 'blur'
        }
      }
    }
  },
  methods: {
    onSubmit(form) {
      this.$refs[form].validate((valid)=>{
        if (valid) {
          console.log(this.form)
          const url = this.dialog.option == 'add' ? 'add' : `edit/${this.form.id}`;
          this.$axios.post(`/api/profiles/${url}`,this.form)
            .then((res)=>{
              //添加成功
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              this.dialog.show = false
              this.$emit('update')
            })
        }
      })
    }
  }
}
</script>


<style scoped>
.text_right{

}
</style>